<template>
	<view class="container">
		<view class="u-flex u-row-center u-m-50" v-if="list.length == 0" style="flex-direction: column;">
			<image style="width:300rpx;height:300rpx;" mode="widthFix" src="../../../static/img/no.png"></image>
			<text style="color:#ccc">暂无数据</text>
		</view>
		<view class="list">
			<u-checkbox-group ref="group" @change="checkboxGroupChange" v-model="selectList">
				<view class="list-item" v-for="(item,index) in list" :key="index">
					<view class="item-left">
						<u-checkbox :name="item.id" shape="circle" active-color="#AB61FF" @change="checkboxChange" v-model="item.checked"></u-checkbox>
					</view>
					<view class="item-center">
						<view class="item-title">
							{{item.orderTitle}}
						</view>
						<view class="item-price">
							￥{{item.money}}
						</view>
					</view>
					<view class="item-right">
						<view class="item-time">{{item.payTime.substring(0,10)}}</view>
						<image class="item-bg" :src="itemBg"></image>
					</view>
				</view>
			</u-checkbox-group>
			<view class="page-bottom">
				<view class="left" @click="handleClickSelectAll">
					<image v-if="!isSelectAll" :src="notselect"></image>
					<image v-if="isSelectAll" :src="select"></image>
					<view class="title">全选</view>
				</view>
				<view class="center">
					<span class="title">合计：<span class="price">￥{{totalMarks}}</span></span>
				</view>
				<view class="right">
					<view class="btn" @click="handleClickNext">下一步</view>
				</view>
			</view>
		</view>
		<u-toast ref="uToast" />
		<u-loadmore class="u-m-t-40" v-if="list.length > 5" :status="loadStatus" bgColor="#f4f4f4"></u-loadmore>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isSelectAll: false,
				selectList: [],
				active: false,
				notselect: this.$mAssetsPath.notselect,
				select: this.$mAssetsPath.select,
				itemBg: this.$mAssetsPath.itemBg,
				form: {
					pageNum: 1,
					pageSize: 10,
					status: 1
				},
				loadStatus: 'loadmore',
				list: []
			};
		},
		computed: {
			totalMarks() {
				console.log('totalMarks')
				let total = 0
				this.list.map(val => {
					if (val.checked) {
						total += val.money
					}
				})
				return total
			}
		},
		onLoad() {
			this.getList();
		},
		onPullDownRefresh: function() {
			this.form.pageNum = 1;
			this.getList();
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onReachBottom:function(e){
			// 此tab为空数据
			this.form.pageNum += 1;
			this.loadStatus= "loading";
			this.getList(this.form.pageNum);
			setTimeout(() => {
				this.loadStatus="loadmore";
			}, 1000);
		},
		onNavigationBarButtonTap() {
			this.$mRouter.push({
				route: this.$mRoutesConfig.history
			});
		},
		methods: {
			async getList(page) {
				let data = await this.$apis.findTransactionAll(this.form);
				if (data.data.last) {
					this.loadStatus = "nomore";
				}
				if (page) {
					this.list = this.list.concat(data.data.content);
				} else {
					this.list = data.data.content;
				}
			},
			checkboxChange(e) {
				let id = e.name;
				for (var i in this.list) {
					if (this.list[i].name == id) {
						this.list[i].checked = !this.list[i].checked;
					}
				}
				this.selectList.splice(id);
				this.list = this.list.reverse().reverse();
				console.log(this.list);
				console.log('checkboxChange', e)
			},
			handleClickNext() {
				if (this.totalMarks === 0) {
					this.$refs.uToast.show({
						title: '请至少选择一条记录',
						type: 'warning'
					})
				} else {
					console.log('this.totalMarks', this.totalMarks)
					uni.navigateTo({
						url: this.$mRoutesConfig.apply.path + '?'+'row='+JSON.stringify(this.list)
					})
				}
			},
			handleClickSelectAll() {
				this.isSelectAll = !this.isSelectAll
				this.checkedAll()
			},
			checkboxGroupChange(e) {
				console.log('checkboxGroupChange', e);
			},
			checkedAll() {
				this.list.map(val => {
					val.checked = true;
					return val;
				})
				console.log('list', this.list)
				this.list = this.list.reverse().reverse();
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f4f4f4;
	}

	.container {
		position: relative;

		.page-bottom {
			width: 100%;
			height: 100upx;
			background-color: #fff;
			position: fixed;
			bottom: 0;
			display: flex;
			align-items: center;
			padding: 30upx;
			justify-content: space-between;

			.center {
				flex: 1;
				padding: 40upx;

				.title {
					font-size: 26upx;
					color: #0D1D36;
				}

				.price {
					font-size: 32upx;
					color: #FF3300;
				}
			}

			.left {
				display: flex;
				align-items: center;

				.title {
					color: #888D99;
					margin-left: 10upx;
					font-size: 26upx;
				}

				image {
					width: 48upx;
					height: 48upx;
				}
			}

			.right {
				.btn {
					height: 64upx;
					width: 180upx;
					background-color: #AB61FF;
					color: #fff;
					border-radius: 32upx;
					line-height: 64upx;
					text-align: center;
				}
			}
		}

		.list {
			border-top: #f4f4f4 solid 1upx;
			margin-bottom: 130upx;
			width: 100%;

			.u-checkbox-group {
				width: 100%;

				.list-item {
					width: 100%;
					height: 150upx;
					display: flex;
					align-items: center;
					padding: 0 24upx;
					background-color: #fff;
					border-bottom: #f4f4f4 solid 1upx;

					.item-right {
						width: 200upx;
						height: 100%;
						position: relative;
						display: flex;
						flex-direction: column-reverse;

						.item-time {
							margin-bottom: 30upx;
							color: #888D99;
							font-size: 26upx;
							text-align: right;
						}

						.item-bg {
							position: absolute;
							top: 20upx;
							right: 30upx;
							width: 82upx;
							height: 110upx;
						}
					}

					.item-center {
						flex: 1;
						height: 100%;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						padding: 26upx 20upx;

						.item-title {
							width:350rpx;
							font-size: 32upx;
						}

						.item-price {
							font-size: 32upx;
							color: #FF3300;
						}
					}

					.item-left {
						padding-left: 5upx;
					}
				}
			}

		}
	}
</style>
